<template>
	<view class="slicing-off-main-page-content">
		<easy-select-form-item
			class="forma-item"
			label="起始站点"
			v-model="form.stationCode"
			:msg="msg.stationCode"
			:list="startStationList"
			:clearable="false"
			value-field="stationCode"
			label-field="stationName"
			@select="onStartSelect"
		/>
		<view v-if="selectContainer && form.stationCode" class="only-watch-container forma-item">
			<view class="label">托盘码：</view>
			<view class="content auto-wrap">{{selectContainer}}</view>
		</view>
		<scan-input-form-item
			v-if="!selectContainer && form.stationCode"
			class="forma-item"
			label="托盘码"
			v-model="form.container"
			:msg="msg.container"
			:msg-type="msgType.container"
			@search="onSearchContainer"
			@change="onChangeContainer"
		/>
		<scan-input-form-item
			v-if="form.stationCode"
			class="forma-item"
			label="泡沫码"
			v-model="form.material"
			:msg="msg.material"
			@search="onSearchMaterial"
			@change="onChangeMaterial"
		/>
		<view class="view-materials-btn" v-if="list.length>0" @tap.stop="onViewDetail">查看泡沫板详情({{list.length}})</view>
		<scan-input-form-item
			v-if="list.length>0 && container"
			class="forma-item"
			label="船号"
			v-model="form.shipNo"
			:msg="msg.shipNo"
			:has-scan="false"
			:has-search="false"
		/>
		<scan-input-form-item
			v-if="list.length>0 && container"
			class="forma-item"
			label="图号"
			v-model="form.drawingNo"
			:msg="msg.drawingNo"
			:has-scan="false"
			:has-search="false"
		/>
		<long-width-height-form-item 
			v-if="list.length>0 && container"
			class="forma-item"
			label="泡沫尺寸" 
			:long.sync="sizeform.long" 
			:width.sync="sizeform.width" 
			:height.sync="sizeform.height" 
			:msg="msg.spec"
		/>
	</view>
</template>

<script>
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import LongWidthHeightFormItem from '@/pages/components/LongWidthHeightFormItem.vue'
import { $alert, parseDic } from '@/static/js/utils/index.js'
const defaultForm = {
	stationCode:'',
	container:'',
	material:'',
	drawingNo:'',
	shipNo:''
}
const defaultSizeForm = {
	long:0,
	width:0,
	height:0
}
export default {
	name:'slicingOffMainPageContent',
	emits:['pageChange'],
	components:{ScanInputFormItem,LongWidthHeightFormItem,EasySelectFormItem},
	data(){
		return {
			form: {...defaultForm},
			msg:{
				stationCode:'',
				container:'',
				material:'',
				drawingNo:'',
				spec:'',
				shipNo:''
			},
			msgType:{
				container:'error'
			},
			list:[],
			startStationList:[],
			selectContainer:'',
			container:null,
			sizeform:{...defaultSizeForm}
		}
	},
	watch:{
		'sizeform.long'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'sizeform.width'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'sizeform.height'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'form.shipNo'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchShipNo()
			}
		},
		'form.drawingNo'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchDrawingNo()
			}
		},
	},
	methods:{
		onSearchContainer(){
			if (!this.form.container) {
				this.msgType.container = 'error'
			  this.msg.container = '请输入托盘码！';
			  return false;
			}
			this.msg.container = '';
			this.getContainerInfo()
		},
		onChangeContainer(){
			if (!this.form.container) {
				this.clearFullContainer()
			} else if (this.form.container.length===8) {
				this.msg.container = '';
				this.getContainerInfo()
			}
		},
		clearStationCode(clearmsg=true){
			this.form.stationCode = ''
			this.selectContainer = ''
			if (clearmsg) {
				this.msg.stationCode = ''
			}
		},
		clearFullContainer(){
			this.clearContainer()
			this.clearBackContainer()
		},
		onSearchMaterial(){
			if (!this.form.material) {
				this.msgType.material = 'error'
			  this.msg.material = '请输入泡沫码！';
			  return false;
			}
			if (!this.selectContainer && !this.form.container) {
				this.clearMaterial()
				$alert('请先录入托盘信息！')
			  return false;
			}
			this.msg.material = '';
			this.addMaterial()
		},
		onChangeMaterial(){
			this.msg.material = '';
			if (this.form.material.length===16) {
				if (!this.selectContainer && !this.form.container) {
					this.clearMaterial()
					$alert('请先录入托盘信息！')
				  return false;
				}
				this.addMaterial()
			}
		},
		onStartSelect(val,obj){
			this.selectContainer = obj.containerCode
			this.getContainerInfoBySelectStation()
		},
		clearContainer(){
			this.form.container = ''
			this.msg.container = ''
		},
		clearMaterial(){
			this.form.material = ''
			this.msg.material = ''
		},
		clearBackContainer(){
			this.container = null
			this.list = []
		},
		addMaterial(){
			let f = this.checkMaterialIn()
			if (f) {
				this.msg.material = '重复添加'
			} else {
				let obj = {materialno:this.form.material}
				this.list.unshift(obj)
				this.clearMaterial()
			}
		},
		checkMaterialIn(){
			let res = false;
			for (let i=0;i<this.list.length;i++) {
				if (this.form.material===this.list[i].materialno) {
					res = true
					break;
				}
			}
			return res
		},
		getContainerInfoBySelectStation(){
			if (this.selectContainer) {
				this.getContainerInfo()
			} else {
				this.clearFullContainer()
			}
		},
		getStartStationList(callback){
			this.$api.get('StarPlaceList',{},{block:'offline',loading:false,warn:false}).then((d)=>{
				this.startStationList = d || []
				if (this.startStationList.length===1){
					this.form.stationCode = this.startStationList[0].stationCode
					this.msg.stationCode = ''
					this.selectContainer = this.startStationList[0].containerCode
				} else {
					this.clearStationCode(true)
					this.clearFullContainer()
				}
				callback && callback(true)
			}).catch(errmsg=>{
				this.msg.stationCode = errmsg
				this.startStationList = []
				this.clearStationCode(false)
				this.clearFullContainer()
				callback && callback(false)
			})
		},
		getContainerInfo(callback,needLoding=true) {
			const __setErrMessage = function(__msg) {
				if (!__msg) {
					__msg = '网络错误，请稍后再尝试！'
				}
				if (this.selectContainer) {
					$alert(__msg)
				} else {
					this.msgType.container = 'error'
					this.msg.container = __msg;
				}
			}.bind(this)
			let params = {}
			if (this.selectContainer) {
				params.ContainerCode = this.selectContainer
			} else {
				params.ContainerCode = this.form.container
			}
			this.$api.get('ContainerInformation',params,{block:'offline',loading:needLoding,warn:false,fullRes:true}).then((d)=>{
				if (d.data) {
					if (d.data.wmsContainer) {
						this.container = d.data.wmsContainer
						this.list = d.data.wmsMaterials || []
						if (this.list.length>0){
							if (this.list[0].long) {
								this.sizeform.long = this.list[0].long
							}
							if (this.list[0].wide) {
								this.sizeform.width = this.list[0].wide
							}
							if (this.list[0].high) {
								this.sizeform.height = this.list[0].high
							}
							if (this.list[0].drawingNo) {
								this.form.drawingNo = this.list[0].drawingNo
							}
							if (this.list[0].shipNo) {
								this.form.shipNo = this.list[0].shipNo
							}
						}
						if (!this.selectContainer) {
							let _temp1 = parseDic(this.$store,'container_status',this.container.containerStatus)
							this.msgType.container = 'info'
							this.msg.container = `尺寸：${this.container.specLength}*${this.container.specWidth}，状态：${_temp1}`
						}
						callback && callback(true)
					} else {
						this.clearBackContainer()
						__setErrMessage(d.message)
						callback && callback(false)
					}
				} else {
					this.clearBackContainer()
					__setErrMessage(d.message)
					callback && callback(false)
				}
			}).catch((_errmsg)=>{
				this.clearBackContainer()
				__setErrMessage(_errmsg)
				callback && callback(false)
			})
		},
		getSubmitParams(){
			return {
				list:this.list,
				drawingNo:this.form.drawingNo,
				shipNo:this.form.shipNo,
				long:this.sizeform.long,
				wide:this.sizeform.width,
				high:this.sizeform.height,
				container:this.container,
				stationCode:this.form.stationCode
			}
		},
		checkSubmit(submitType="confirm") {
			let res = {flag:true,data:{}}
			res.data = this.getSubmitParams()
			if (!res.data.stationCode) {
				this.msg.stationCode = '请选择起始站点！'
				res.flag = false
			} else {
				this.msg.stationCode = ''
			}
			if (res.flag && (!res.data.container)) {
				const msgtext = '请先录入托盘信息！'
				if (!this.selectContainer) {
					this.msg.container = msgtext
					this.msgType.container = 'error'
				} else {
					$alert(msgtext)
				}
				res.flag = false
			} else {
				this.msg.container = ''
			}
			if (res.flag && res.data.list.length<=0) {
				$alert('请录入泡沫数据！')
				res.flag = false
			} 
			if (res.flag && !res.data.shipNo) {
				this.msg.shipNo = '请先录入船号！'
				res.flag = false
			} else {
				this.msg.shipNo = ''
			}
			if (res.flag && !res.data.drawingNo) {
				this.msg.drawingNo = '请先录入图号！'
				res.flag = false
			} else {
				this.msg.drawingNo = ''
			}
			if (res.flag && (!res.data.long || !res.data.wide || !res.data.high)) {
				this.msg.spec = '请先录入泡沫尺寸！'
				res.flag = false
			} else {
				this.msg.spec = ''
			}
			return res;
		},
		watchSpec(){
			if (this.sizeform.long && this.sizeform.width && this.sizeform.height) {
				this.msg.spec = ''
			}
		},
		watchDrawingNo(){
			if(this.form.drawingNo) {
				this.msg.drawingNo = ''
			} else {
				this.msg.drawingNo = '请先录入图号！'
			}
		},
		watchShipNo(){
			if(this.form.shipNo) {
				this.msg.shipNo = ''
			} else {
				this.msg.shipNo = '请先录入船号！'
			}
		},
		onViewDetail(){
			this.$emit('pageChange',this.list)
		},
		clear(){
			this.clearContainer()
			this.clearMaterial()
			this.clearBackContainer()
		},
		init(){
			uni.showLoading({
				title: '加载中...',
				mask:true
			});
			this.getStartStationList((f)=>{
				if (f) {
					if (this.selectContainer) {
						this.getContainerInfo(()=>{
							uni.hideLoading();
						},false)
					} else {
						uni.hideLoading();
					}
				} else {
					uni.hideLoading();
				}
			})
		},
		listChange(arr){
			this.list = arr
		}
	},
	mounted() {
		this.init()
	}
}
</script>

<style lang="scss" scoped>
.slicing-off-main-page-content {
	height: 100%;
	overflow: auto;
	.forma-item{
		margin-bottom: 24rpx;
	}
	.view-materials-btn{
		height: 90rpx;
		box-sizing: border-box;
		border-style: solid;
		border-color: $uni-border-1;
		border-width: 2rpx 0 2rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $uni-color-primary;
		color: $uni-bg-color;
		margin-bottom: 24rpx;
	}
	.only-watch-container{
		background-color: #D0DDD8;
		min-height: 90rpx;
		display: flex;
		&>.label{
			color: $u-tips-color;
			font-size: 32rpx;
			flex-shrink: 0;
			padding-left: 20rpx;
			padding-top: 22rpx;
		}
		&>.content{
			width: 1px;
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 8rpx 0;
		}
	}
}
</style>